<!--数据资源目录-->
<script src="../../../../工具/ddmm/monitor/monitor-portal/src/main/webapp/js/index.js"></script>
<template>
  <layout :title-url="titleUrl" class="layout-wrap">
    <div class="layout">
      <div class="layout-west">
        <div class="mod">
          <mod-title title="重要资源字段占比"></mod-title>
          <bar-one :series-data="oneData" :x-axis-data="oneXData" ref="zyzy"></bar-one>
        </div>
        <div class="mod" ref="areaHeight">
          <el-carousel trigger="click" arrow="never" :interval="5000" indicator-position="outside"
                       :height="barHeight">
            <el-carousel-item v-for="item in 2" :key="item">
              <mod-title :title="item === 1 ? '资源更新' :'近一季度各地市资源动态更新目录情况'"></mod-title>
              <js-line :xData="xDataFrequency"
                       :yData="yDataFrequency"
                       :colors="colorFrequency"
                       :to-colors="toColors"
                       :form-colors="formColors"
                       v-show="item === 1"
              ></js-line>
              <ul v-show="item === 2">
                <li v-for="(data,index) in statics" :key="index">
              <span class="title" :title="data.title">
                {{data.title}}
              </span>
                  <span class="number" :title="data.num">{{data.num}}</span>
                </li>
              </ul>
            </el-carousel-item>
          </el-carousel>
        </div>
      </div>
      <div class="layout-main">
        <js-map ref="jsmap"
                :mapOptions="mapOptions"
                :mapData="data"
                :mouseoverHandler="showTips"
                :mouseoutHandler="hideTips"
                :clickHandler="changeData"></js-map>
      </div>
      <div class="layout-east">
        <div class="check-times">资源目录总数：<span>{{total}}</span>个</div>
        <el-table
          :data="tableData"
          class="check-detail">
          <el-table-column
            type="index"
            label="序号"
            width="70">
          </el-table-column>
          <el-table-column
            prop="name"
            label="资源名称"
            width="300">
          </el-table-column>
          <el-table-column
            prop="value"
            label="数据总数">
          </el-table-column>
        </el-table>
      </div>
    </div>
  </layout>
</template>

<style lang="scss">
  * {
    box-sizing: border-box;
  }

  .layout {
    height: 100%;
    padding-top: 60px;
    display: flex;

  .layout-west, .layout-east, .layout-main {
    height: 100%;
  }

  .layout-west, .layout-east {
    overflow-y: hidden;
    flex: 1
  }

  .mod {
    height: 50%;
    list-style: none;
    font-size: 22px;

  ul {
    margin: 20px 0 0;
  }

  li {
    height: 45px;
    line-height: 45px;
    overflow: hidden;
    border-bottom: 1px solid #428ED2;

  .title {
    color: #fff;
    width: 60%;
    max-width: 300px;
    height: 45px;
    float: left;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .number {
    width: 40%;
    height: 45px;
    float: right;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-weight: bold;
    font-size: 22px;
    color: #ffc22e;
    text-align: right;
  }

  }

  }
  .layout-main {
    flex: 1.5;
    padding-top: 90px;
  }

  .el-table {
    background-color: rgba(255, 255, 255, 0);
  }

  .el-table {
    border-bottom: none
  }

  .el-table th {
    background: rgba(14, 65, 121, .8);
    color: #FFFC00;
  }

  .el-table th, .el-table td {
    padding: 0;
    height: 50px;
    line-height: 50px;
    border-bottom: none
  }

  .el-table tr:nth-child(even) {
    background: rgba(14, 65, 121, .3);
    color: #fff;
  }

  .el-table tr:nth-child(odd) {
    background: rgba(0, 0, 0, 0);
    color: #fff;
  }

  .el-table tr:last-child td {
    border-bottom: none
  }

  .el-table--enable-row-hover .el-table__body tr:hover > td {
    background-color: inherit;
  }

  .el-table::before {
    height: 0;
  }

  }

  .check-times {
    background: url("../assets/images/mod-title.png") top center no-repeat;
    padding: 10px 0;
    font-size: 24px;
    color: #00f6ff;
    text-align: center;
    font-weight: bold;

  span {
    color: #edff00;
  }

  }

  .check-detail {
    width: 100%;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
  }
</style>

<script>
  import ModTitle from '../components/mod-title.vue'
  import Layout from '../components/layout.vue'
  import JsMap from '../components/js-map.vue'
  import XdhLayout from '../widgets/xdh-layout'
  import BarOne from '../components/bar-one'
  import {on} from 'element-ui/lib/utils/dom'
  import jsLine from '../components/js-line'

  const statics1 = [
    {
      title: '南京市—人员信息 ',
      num: 2398000
    },
    {
      title: '无锡市—企业变更登记信息',
      num: 2398000
    },
    {
      title: '徐州市—组织机构代码证-变',
      num: 2398000
    },
    {
      title: '常州市—股权结构信息',
      num: 2398000
    },
    {
      title: '苏州市—自然人-股东-发起人',
      num: 2398000
    },
    {
      title: '南通市—注销登记信息',
      num: 2398000
    },
    {
      title: '扬州市—监事会信息-变更',
      num: 2398000
    }
  ]

  const statics2 = [
    {
      title: '南京市—人员信息 ',
      num: 4398000
    },
    {
      title: '无锡市—企业变更登记信息',
      num: 4398000
    },
    {
      title: '徐州市—组织机构代码证-变',
      num: 4398000
    },
    {
      title: '常州市—股权结构信息',
      num: 4398000
    },
    {
      title: '苏州市—自然人-股东-发起人',
      num: 4398000
    },
    {
      title: '南通市—注销登记信息',
      num: 4398000
    },
    {
      title: '扬州市—监事会信息-变更',
      num: 4398000
    }
  ]

  const tableData1 = [{
    name: '人员信息',
    value: '21009906'
  }, {
    name: '社保信息2',
    value: '21009900'
  }, {
    name: '企业变更登记信息',
    value: '4589484'
  }, {
    name: ' 组织机构代码证-变更信息',
    value: '45322184'
  }, {
    name: ' 组织机构代码证-变更信息',
    value: '45322184'
  }, {
    name: ' 组织机构代码证-变更信息',
    value: '45322184'
  }, {
    name: ' 组织机构代码证-变更信息',
    value: '45322184'
  }, {
    name: ' 组织机构代码证-变更信息',
    value: '45322184'
  }, {
    name: ' 组织机构代码证-变更信息',
    value: '45322184'
  }, {
    name: ' 组织机构代码证-变更信息',
    value: '45322184'
  }, {
    name: ' 组织机构代码证-变更信息',
    value: '45322184'
  }, {
    name: ' 组织机构代码证-变更信息',
    value: '45322184'
  }, {
    name: ' 组织机构代码证-变更信息',
    value: '45322184'
  }, {
    name: ' 组织机构代码证-变更信息',
    value: '45322184'
  }, {
    name: ' 组织机构代码证-变更信息',
    value: '45322184'
  }, {
    name: ' 组织机构代码证-变更信息',
    value: '45322184'
  }]

  const tableData2 = [{
    name: '人员信息',
    value: '2342342'
  }, {
    name: '社保信息2',
    value: '3434434'
  }, {
    name: '企业变更登记信息',
    value: '1215555'
  }, {
    name: ' 组织机构代码证-变更信息',
    value: '44443232'
  }, {
    name: ' 组织机构代码证-变更信息',
    value: '38785543'
  }, {
    name: ' 组织机构代码证-变更信息',
    value: '3454378'
  }, {
    name: ' 组织机构代码证-变更信息',
    value: '34524222'
  }, {
    name: ' 组织机构代码证-变更信息',
    value: '44443232'
  }, {
    name: ' 组织机构代码证-变更信息',
    value: '44443232'
  }, {
    name: ' 组织机构代码证-变更信息',
    value: '38785543'
  }, {
    name: ' 组织机构代码证-变更信息',
    value: '38785543'
  }, {
    name: ' 组织机构代码证-变更信息',
    value: '1215555'
  }, {
    name: ' 组织机构代码证-变更信息',
    value: '1215555'
  }, {
    name: ' 组织机构代码证-变更信息',
    value: '1215555'
  }, {
    name: ' 组织机构代码证-变更信息',
    value: '34524222'
  }, {
    name: ' 组织机构代码证-变更信息',
    value: '38785543'
  }]

  const data = [
    {name: '徐州市', value: 19},
    {name: '连云港市', value: 19},
    {name: '宿迁市', value: 19},
    {name: '淮安市', value: 19},
    {name: '盐城市', value: 19},
    {name: '扬州市', value: 9},
    {name: '泰州市', value: 12},
    {name: '南京市', value: 30},
    {name: '镇江市', value: 12},
    {name: '常州市', value: 12},
    {name: '无锡市', value: 19},
    {name: '苏州市', value: 19},
    {name: '南通市', value: 19}]
  export default {
    components: {
      ModTitle,
      Layout,
      JsMap,
      BarOne,
      jsLine,
      XdhLayout
    },
    mounted() {
      this.areaH = this.$refs.areaHeight.clientHeight - 40;
      on(window, 'resize', this.getAreaHeight);
    },
    computed: {
      barHeight() {
        return this.areaH + 'px'
      }
    },
    data() {
      return {
        isSwitch: false,
        titleUrl: require('../assets/images/data_catelog.png'),
        total: 534,
        oneData: [45, 43, 56, 79, 65],
        oneXData: ['姓名', '身份证', '电话', '单位', '地址'],
        xDataFrequency: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
        yDataFrequency: [135, 165, 160, 158, 85, 61, 140, 120, 95, 80, 73, 85],
        colorFrequency: 'rgba(255, 180, 0,1)',
        toColors: 'rgba(255, 180, 0,1)',
        formColors: 'rgba(240, 87, 61, 1)',
        options: {},
        statics: statics1,
        areaH: '',
        tableData: tableData1,
        data: data,
        mapOptions: {
          visualMap: {
            show: false,
            min: 0,
            max: 30,
            left: 'left',
            top: 'bottom',
            text: ['高', '低'], // 文本，默认为数值文本
            calculable: true,
            seriesIndex: [1],
            inRange: {
              color: ['#3897D3', '#1964b0', '#53B550', '#F2C621', '#e55b34'] // 蓝绿
            }
          },
          series: [
            {
              name: '点',
              type: 'scatter',
              coordinateSystem: 'geo',
              symbol: 'image://' + require('../assets/images/map_title_bg5.png'),
              symbolSize: 0,
              symbolOffset: [5, -40],
              label: {
                normal: {
                  show: true,
                  position: 'insideTop',
                  formatter: function (params) {
                    return '数据总量：' + params.value[2]
                  },
                  textStyle: {
                    color: '#fff',
                    fontSize: 14
                  }
                }
              },
              itemStyle: {
                normal: {
                  color: '#19AFF4' // 标志颜色
                }
              },
              zlevel: 6
            },
            {
              name: 'jiangsu',
              type: 'map',
              mapType: 'jiangsu',
              left: 80,
              right: 80,
              top: 10,
              bottom: 10,
              roam: false,
              label: {
                normal: {
                  show: false
                },
                emphasis: {
                  show: false
                }
              },
              itemStyle: {
                normal: {
                  areaColor: '#3897D3',
                  borderColor: '#fff',
                  borderWidth: 2
                },
                emphasis: {
                  areaColor: '#3897D3'
                }
              }
            },
            {
              name: '点',
              type: 'scatter',
              coordinateSystem: 'geo',
              symbol: 'circle',
              symbolSize: 8,
              symbolOffset: [0, -10],
              hoverAnimation: true,
              label: {
                normal: {
                  show: true,
                  fontSize: 20,
                  textShadowColor: 'rgba(231, 247, 254,.5)',
                  textShadowBlur: 15,
                  color: '#fff',
                  position: 'bottom',
                  formatter: function (params) {
                    return params.name.replace(/([\s\S]+)市/, '$1')
                  }
                }
              },
              itemStyle: {
                normal: {
                  color: '#fff' // 标志颜色
                }
              },
              zlevel: 6
            }
          ]
        }
      }
    },
    methods: {
      getAreaHeight() {
        this.areaH = this.$refs.areaHeight.clientHeight - 40;
      },
      showTips(params) {
        this.$set(this.data[params.dataIndex], 'symbolSize', [158, 60])
      },
      hideTips(params) {
        this.$set(this.data[params.dataIndex], 'symbolSize', 0)
      },
      /**
       * 点击效果
       * @param params
       */
      changeData(params) {
        // 为做演示，设置了两套数据，isSwitch来切换，真正套接口应该读接口数据
        if (!this.isSwitch) {
          this.statics = statics2
          this.oneData = [67, 45, 33, 44, 55]
          this.yDataFrequency = [111, 333, 222, 112, 221, 123, 97, 69, 99, 78, 88, 61]
          this.total = 1882
          this.tableData = tableData2
          this.isSwitch = true
        } else {
          this.statics = statics1
          this.oneData = [45, 43, 56, 79, 65]
          this.yDataFrequency = [135, 165, 160, 158, 85, 61, 140, 120, 95, 80, 73, 85]
          this.total = 534
          this.tableData = tableData1
          this.isSwitch = false
        }
      }
    }
  }
</script>

